<template>
  <transition name="fade" mode="out-in">
    <div class="code">
      <van-nav-bar
        title="业务员详情"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="code-title">
        待审核
      </div>

      <div class="code-section">
        <div class="section-title">
          业务员基本信息
        </div>
        <van-cell-group>
          <van-cell value="何佳丽" >
            <template slot="title">
              <span class="custom-text">人员姓名</span>
              <span class="required">*</span>
            </template>
          </van-cell>
          <van-cell value="TJI73947" >
            <template slot="title">
              <span class="custom-text">推荐码</span>
              <span class="required">*</span>
            </template>
          </van-cell>
          <van-cell value="17666535489" >
            <template slot="title">
              <span class="custom-text">人员姓名</span>
              <span class="required">*</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div class="code-section">
        <div class="section-title">
          分成比例
        </div>
        <van-cell-group>
          <van-cell value="6%" >
            <template slot="title">
              <span class="custom-text">二级业务员比例</span>
              <span class="required">*</span>
            </template>
          </van-cell>
          <van-cell value="7%" >
            <template slot="title">
              <span class="custom-text">我的比例</span>
              <span class="required">*</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div class="code-section">
        <div class="section-title">
          资质信息
        </div>
        <van-cell-group>
          <van-cell value="已上传" is-link @click="clickShowPic">
            <template slot="title">
              <span class="custom-text">营业执照</span>
              <span class="required">*</span>
            </template>
          </van-cell>
          <van-cell value="已上传" is-link @click="clickShowPic" >
            <template slot="title">
              <span class="custom-text">开户许可证</span>
              <span class="required">*</span>
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group style="margin-top: 8px;">
          <van-cell title="公司名称" value="上海欧点有限科技公司" />
          <van-cell title="联系人" value="何佳丽" />
          <van-cell title="联系方式" value="15064746485" />
          <van-cell title="联系地址" value="上海市彭埔路" />
        </van-cell-group>
      </div>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Cell, CellGroup, ImagePreview } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  data () {
    return {
    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    clickShowPic() {
      ImagePreview([
        'https://img.yzcdn.cn/2.jpg'
      ])
    }
  },
}
</script>

<style scoped>
.code {
  height: 100vh;
  overflow: auto;
  background-color: #F3F3F3;
  color: #38393A;
}
.code-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
  padding: 10px 16px;
  background-color: #fff;
}
.code-section {

}
.section-title {
  font-size: 14px;
  line-height: 20px;
  color: #999999;
  padding: 16px 16px 6px 16px;
}
.required {
  font-size: 16px;
  line-height: 21px;
  color: #FF4B4B;
}
</style>
